<!--
 * @Author: 236180300 236180300@qq.com
 * @Date: 2024-01-17 14:48:26
 * @LastEditors: 236180300 236180300@qq.com
 * @LastEditTime: 2024-01-19 17:31:50
 * @FilePath: \Admin\src\views\wi\StatusMonitor\Video.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="Video">
        <MyDialog :model-value="true" :type="DialogType.C2" :title="title" @close="onClose" top="6%" height="900px" append-to-body>
            <div id="video" style="height: 600px; width: 100%"></div>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import { DialogType, HttpType } from "@/_gx/TsEnums";

import EZUIKit from "ezuikit-js";

const props = defineProps({
    url: {
        type: String,
        default: "",
    },
});

var player = null;

onMounted(() => {
    setTimeout(() => {
        App.CallApi(
            { url: "https://open.ys7.com/api/lapp/token/get", method: HttpType.POST },
            {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: "appKey=cbb1a15bca13455088cbc0d1db6bd020&appSecret=499db7902a3f1f4845e558679ca5a927",
                success: (res) => {
                    console.log("success:", res);
                },
                fail: (res) => {
                    console.log("fail:", res);
                    if (res.code == "200") {
                        let access_token = res.data.accessToken;
                        player = new EZUIKit.EZUIKitPlayer({
                            id: "video", // 视频容器ID
                            accessToken: access_token,
                            url: props.url,
                        });
                        player.play();
                    }
                },
            }
        );
    }, 500);
});

/********************************************** 接收参数 **********************************************/

/********************************************** 列表相关定义 **********************************************/

//表格的数据
const list = ref([]);
const title = ref();
const type = ref();

/********************************************** 列表按钮功能 **********************************************/

//关闭
const onClose = () => {
    player.stop();
    emits("close", false);
};

const emits = defineEmits(["close"]);
defineExpose({});
</script>
